<template>
	<view class="container">
		<view
			class="item" 
			v-for="(item,index) in subjectLists" 
			:key="index"
			@tap="$toPage('index?id='+item.id)"
		>
			<image :src="item.cover" mode="widthFix" class="cover"></image>
			<view class="info">
				<view class="title text-ellipsis">{{item.name}}</view>
				<view class="summary text-ellipsis">{{item.summary}}</view>
			</view>
		</view>
		<!-- 上拉加载 -->
		<uni-load-more v-show="subjectLists.length" :status="loadStatus" ></uni-load-more>
	</view>
</template>

<script>	
	// 定义一个加载页面数据的常量
	const PAGE_SIZE = 4;
	export default {
		// 二注
		// components:{
		// 	card
		// },
		data() {
			return {
				subjectLists:[],
				query:{
					page:1
				},
				loadStatus:"more",  // 加载完之后显示是否更多
				isLoaded:false,  // 判断是否加载完成
			}
		},
		onLoad() {
			// 1.获取文章列表
			this.getSubjectList();
			
		},
		// 3.下拉刷新
		onPullDownRefresh() {
			this.onRefresh();
		},
		// 4.下拉触底		
		onReachBottom() {
			this.getNextPage();
		},
		methods: {
			// 1.获取文章列表
			getSubjectList(){
				// 重置状态
				this.loadStatus = 'loading';
				this.$request({
					url:this.$api.getSubjectList,
					data:this.query,
					success:data=>{
						// mysql中返回的数组是字符串数组,需要转换成对象数组
						// data = JSON.parse(data);
						// 截取等同数量的数据公式：slice包头不包尾 
						// (page-1)*pageSize, page*pageSize   page表示当前的页数,pageSize表示常量,每次渲染的数量
						data = data.slice((this.query.page-1)*PAGE_SIZE,PAGE_SIZE*this.query.page);
												
						// 3.x 取消下拉刷新
						uni.stopPullDownRefresh();
						
						// 判断数据是否加载完成
						this.isLoaded = data.length < PAGE_SIZE;
						
						// 更新加载的状态
						this.loadStatus = this.isLoaded ? 'noMore':'more';
						
						// 判断是否是第一页
						if(this.query.page > 1){  // 不是第一页
							this.subjectLists.push(...data);
						}else{  // 第一页
							this.subjectLists = data;
						}
					},
					fail: () => {
						// 3.x 取消下拉刷新
						uni.stopPullDownRefresh();
					}
				})
			},
			// 3.下拉刷新
			onRefresh(){
				console.log('下拉刷新');
				// 3.1 初始化首页的文章列表,页面数为1
				this.query.page = 1;
				// 3.2 调用获取文章列表的接口
				this.getSubjectList();
				// 3.x 取消下拉刷新
				// uni.stopPullDownRefresh();
			},
			// 4.下拉触底,加载下一页
			getNextPage(){
				if(this.isLoaded) return;								
				this.query.page++;				
				this.getSubjectList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #FFF;
	}
	.item{
		margin: 30rpx 30rpx 0;
		min-height: 200rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 6rpx 4rpx 2rpx #F2F2F2;
		&:last-child{
			margin-bottom: 30rpx;
		}
		.cover{
			width: 100%;
			border-radius: 10rpx;
		}
		.info{
			padding: 0 20rpx 20rpx;
			.title{
				font-size: 28rpx;
				font-weight: bold;
				margin: 10rpx 0 0rpx;
			}
			.summary{
				color: #777;
				font-size: 24rpx;
			}
		}
	}
</style>
